<template>
	<view class="container">
		<view class="header">
			<image src="/static/icon_my_person.png" mode="" class="pic1"></image>
			<!-- 占位，不要删除 -->
			<view>

			</view>
			<!-- 占位，不要删除 -->
			<view>

			</view>
		</view>
		<!-- 标题区域 -->
		<view class="tit-areas">
			<view>股票代码</view>
			<view>代码名称</view>
			<view>最新价</view>
			<view>涨跌幅</view>
			<view>操作</view>
		</view>
		<!-- 身体区域 -->
		<view v-for="(item,index) in li" :key="index" class="bodyss" @click="clickHandle(item)">
			<view class="first-line">
				<view class="needWhite">{{item.code}}</view>
				<view class="needGray">{{item.name}}</view>
				<view class="needBlue">--</view>
				<view class="needBlue">--</view>
				<view v-if="item.id!==clickFooter"><view class="arrow"></view></view>
				<view v-if="item.id==clickFooter"><view class="arrow-B"></view></view>
			</view>

			<view class="second-line" v-if="item.id==clickFooter">
				<view class="optionsA  need-gray-line" @click="applyMethods(item)">
					<image src="/static/icon_object_edit.png" mode="widthFix"></image><text>申请方案</text>
				</view>
				<view class="optionsA" @click="delMyChoose(item.id)">
					<image src="/static/icon_object_delete.png" mode="widthFix"><text>删除自选</text>
				</view>
			</view>
		</view>

		<!-- 提示框 -->
		<u-modal v-model="delshow" :content="content" :show-cancel-button="true" @confirm="sureDelOne"></u-modal>
	</view>
</template>

<script>
export default {
  data() {
    return {
      li: [],
      clickFooter: 0,
      delshow: false,
      delID: 0,
      content: "确定删除自选吗？",
    };
  },
  onShow() {
    var that = this;
    that.getData();
  },
  methods: {
    getData() {
      var that = this;
      var value = uni.getStorageSync("poxer_ssid");
      var param = { uid: value };
      //////
      that._post("Works/joinList", param, function (res) {
        if (res.status != "1") {
          return;
        }
        that.li = res.data;
      });
    },
    // 点击事件，呼出对应的菜单
    clickHandle(item) {
      var that = this;
      ////
      var click = that.clickFooter;
      that.clickFooter = click == item.id ? 0 : item.id;
      that.needShow = 0;
    },
    // 申请方案
    applyMethods(item) {
      var that = this;
      var value = uni.getStorageSync("poxer_ssid");
      var param = { uid: value, code: item.code };
      //////
      that._post("Works/get_valData", param, function (res) {
        if (res.status != "1") {
          return;
        }
        return uni.navigateTo({
          url: "/pages/ApplicationScheme/ApplicationScheme?id=" + res.data,
        });
      });
    },
    delMyChoose(id) {
      this.delID = id;
      this.delshow = true;
    },
    // 确认删除
    sureDelOne() {
      var that = this;
      var value = uni.getStorageSync("poxer_ssid");
      var param = { uid: value, ids: that.delID };
      //////
      that.delshow = false;
      that._post("Works/joinDel", param, function (res) {
        if (res.status != "1") {
          return;
        }
        that.getData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #000000;
  width: 750rpx;
  height: 100vh;
  position: relative;
}

.search-choose {
  width: 480rpx;
  height: 400rpx;
  position: absolute;
  border: 1px solid white;
  left: 108rpx;
  background-color: white;
  box-sizing: border-box;

  .search-choose-options {
    display: flex;
    align-items: center;
    height: 54rpx;
    box-sizing: border-box;
    padding-left: 20rpx;
    border: 1px solid #e9e9e9;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
}

.header {
  width: 750rpx;
  height: 90rpx;
  background: #0e0e0e;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pic1 {
    width: 40rpx;
    height: 40rpx;
    background: #0e0e0e;
    border-radius: 40rpx;
  }

  input {
    width: 480rpx;
    height: 68rpx;
    background: #ffffff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  .askBtn {
    width: 100rpx;
    height: 68rpx;
    background: #db1414;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.tit-areas {
  width: 750rpx;
  height: 70rpx;
  background: #242426;
  padding-left: 30rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #aaaaaa;
}

.tit-areas view {
  flex: 1;
  text-align: center;
}

//
.bodyss {
  width: 100vw;
  padding-left: 25rpx;
  padding-right: 25rpx;

  // border: 1px solid red;

  .first-line {
    height: 92rpx;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;

    .needWhite {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .needGray {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #aaaaaa;
    }

    .needBlue {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1dec2b;
    }

    .arrow {
      width: 25rpx;
      height: 25rpx;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
      border-bottom: 12rpx solid white;
      display: inline-block;
      flex: none;
    }

    .arrow-B {
      width: 25rpx;
      height: 25rpx;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
      border-top: 12rpx solid white;
      display: inline-block;
      flex: none;
    }
  }

  .first-line view {
    flex: 1;
    text-align: center;
  }

  .second-line {
    height: 92rpx;
    // border: 1px solid blue;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #1b1b1b;

    .need-gray-line {
      border-right: 1rpx solid gray;
    }

    .optionsA {
      width: 50%;
      display: flex;
      justify-content: space-evenly;
      padding: 0 50rpx;

      image {
        width: 30rpx;
        height: 30rpx;
        top: 5rpx;
      }
    }
  }
}
</style>
